<template>
	<view>
		<view class="title">
			<text>我的订单</text>
		</view>
		<view v-for="(goods, i) in cart" :key="i" class="body" >
			<view class="left">
				<image :src="goods.goods_path || defaultPic" class="goods-pic"></image>
			</view>
			<view class="right">
				<view>{{goods.goods_name}}</view>
				<view>共{{goods.goods_count}}件商品，实付款{{total}}元</view>
			</view>
			
		</view>
		<view>订单创建时间{{time}}</view>
	</view>
	</view>
</template>

<script>
	// 按需导入 mapState 这个辅助函数
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		myGoods
	} from '../../components/my-goods/my-goods.vue'
import cart from '../../store/js/cart';
	export default {
		components: {
			"my-goods": myGoods,
		},
		data() {
			return {
				
				options: [{
					text: '删除', // 显示的文本内容
					style: {
						backgroundColor: '#C00000' // 按钮的背景颜色
					}
				}]

			};
		},
		computed: {
			// 将 m_cart 模块中的 cart 数组映射到当前页面中使用
			...mapState('m_cart', ['cart']),
			time:function(){
				return uni.getStorageSync("jiesuan")
			},
			total:function(){
				let totall = 0.00;
				for(let i=0;i<this.cart.length;i++){
					totall += parseFloat(this.cart[i].goods_price.slice(0, -1))*parseFloat(this.cart[i].goods_count)
					console.log(this.cart[i].goods_price);
					console.log(11111111);
				}
				return totall
			}
			},
			methods:{
				
			}
		
	}
</script>

<style lang="less">
	.title {
		text-align: center;

		text {
			font-size: 60rpx;
			font-weight: bold;
			border-radius: 3rpx;
			background-color: lightblue;
		}
	}

	.body {
		border: 1px solid skyblue;
		padding: 20px 20rpx;
		margin: 10rpx;
		display: flex;
		justify-content: space-around;
		.left{
			width:300rpx;
			height:100px;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}
	
</style>